﻿layui.use(['jquery','form','laytpl','laypage'], function () {
    var $ = layui.$,form = layui.form,laytpl = layui.laytpl,laypage = layui.laypage;
    kindEditor= initCommentForm();
    var commentListView = document.getElementById('commentListView');
    commentListView = $("#commentListView")[0];
    form.on('submit(submitComment)', function(data){
        var submitForm = data.form;
        if (submitForm) {
             Lib.submitForm("/cms/comment/add.json", $(data.form), {}, function(data){
               Common.info("添加成功");
               submitForm.reset();
               //kindEditor.html("");
               initCommentList(commentListView, 1,limit);
            })
        } else {
            console.log("form error");
        }

        return false;
    });

    var articleId = $("#commentListView").attr("article_id");
    var limit = $("#commentListView").attr("limit");

    initCommentList(commentListView, 1,limit);

    //回复按钮点击事件
    $('.message-list').on('click', '.btn-reply', function () {
         var targetId = $(this).data('targetid')
             , targetName = $(this).data('targetname')
             , $container = $(this).closest('.info-footer').next('.replycontainer');
         if ($(this).text() == '回复') {
             $container.find('textarea').attr('placeholder', '回复【' + targetName + '】');
             initCommentForm();
             $container.removeClass('layui-hide');
             $(this).parents('.message-list li').find('.btn-reply').text('回复');
             $(this).text('收起');
         } else {
             $container.addClass('layui-hide');
             $container.find('input[name="targetUserId"]').val(0);
             $(this).text('回复');
         }
     });

    function initCommentForm() {
        var kindEditor;
        //kindEditor = Common.initKindedit(".kindEditor",[],{height:100});//初始化文本编辑器
        form.render();
        return kindEditor;
    }
    function initCommentList(element, page,limit) {
       $.post(Common.ctxPath + "/cms/comment/list.json",{articleId:articleId,page:page,limit:limit},function(resp) {
           resp.limit = limit;
           var html = initCommentListHtml(resp.data);
           element.innerHTML = html;
           form.render(null,"submitComment");
           if (resp.count > resp.limit) {
                initCommentListPage(resp.count,page,limit);
           }
       });
    };

    function initCommentListHtml(data) {
        var html = "";
        layui.each(data, function(index, item){
            html = html +
            '<li class="zoomIn article">' +
                '<div class="comment-item">' +
                    '<a name="remark-' + item.id + '"></a>' + (item.photo == null ? '<img src="' + Common.tplPath + '/image/default_face.jpg" />' : '<img src="/core/file/inline/'+ item.photo + '" />' ) +
                    '<div class="info">' +
                        '<span class="username">' + (item.userName == null ? "游客" : item.userName) + '</span>' +
                        '<div class="comment-content">' + item.content + '</div>' +
                        '<p class="info-footer">' +
                            (item.provinceName != null ? '<i class="fa fa-map-marker" aria-hidden="true"></i><span>' + item.provinceName + '</span>' : '') +
                            '<span class="comment-time">' + item.updateTime + '</span>' +
                            '<a href="javascript:;" class="btn-reply" data-targetid="1" data-targetname="' + (item.userName == null ? "游客" : item.userName ) + '">回复</a>' +
                        '</p>' +
                        '<div class="replycontainer layui-hide">' +
                            '<form class="layui-form" lay-filter="submitComment" onsubmit="return false">' +
                                '<input type="hidden" lay-verify="submitComment" name="remarkId" value="1">' +
                                '<input type="hidden" lay-verify="submitComment" name="parentId" value="' + item.id + '">' +
                                '<div class="layui-form-item">' +
                                    '<textarea name="content" lay-verify="submitComment" placeholder="请输入回复内容" class="layui-textarea kindEditor" style="min-height:80px;"></textarea>' +
                                '</div>' +
                                '<div class="layui-form-item">' +
                                    '<button class="layui-btn" lay-submit lay-filter="submitComment">回复' + (item.userName == null ? "游客" : item.userName )+ '的评论</button>' +
                                '</div>' +
                            '</form>' +
                        '</div>' +
                        '<hr />' +
                        '<div class="comment-child">' +
                            '<ul article_id="' + articleId + '" id="commentListView_' + item.id + '" limit="5" class="message-list">' +
                                initCommentListHtml(item.childList) +
                            '</ul>' +
                        '</div>' +
                    '</div>' +
                '</div>' +
            '</li>';
        });
        return html;
    }

    function initCommentListPage(count,curr,limit) {
        return laypage.render({
            elem: 'page'
            ,count: count
            ,curr:curr
            ,limit:limit
            ,layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']
            ,jump: function(obj,first){
              //首次不执行
              if(!first){
                  initCommentList(commentListView, obj.curr,limit);
              }
            }
          });
    }
});
var option = {
    initChildCommentList : function(data,id) {
        if (data == null) {
            return;
        }
        var d = {};
        d.data = data;
        layui.use(['laytpl'],function() {
            var laytpl = layui.laytpl;
            var commentListView = document.getElementById(id);
            if (commentListView) {
                var getTpl = commentListTpl.innerHTML;
                laytpl(getTpl).render(d, function(html){
                   commentListView.innerHTML = html;
                   form.render(null,"submitComment");
                });
            }

        });
     },
}

